import { defineComponent, ref } from 'vue';
import { useUserInfoStore } from '@/domain/authority/hooks/login';
import { Button, Popconfirm, Avatar, Popover } from 'ant-design-vue';
import ziti from '@/project/dataBoard/assets/images/nav_logo.png';
import tx from '@/project/dataBoard/assets/images/pic_default_photo.png';
import { DownloadOutlined, ExportOutlined } from '@ant-design/icons-vue';
import Download from './download';
export default defineComponent({
  name: 'headers',
  setup(props, { slots }) {
    const store = useUserInfoStore();

    const downloadStatus = ref(false);
    const hoverStatus = ref(false);

    const changeOpenStatus = (status: boolean) => {
      downloadStatus.value = status;
    };
    return () => (
      <>
        <div class={'h-16 px-6 py-3  bg-white flex items-center'} style={{ boxShadow: '2px 2px 6px 0 hsl(0deg 0% 80% / 50%)' }}>
          <img class="inline-block align-top w-60 h-auto" alt="" src={ziti}></img>
          {/* <span class={' text-lg ml-2 w-2 font-black text-primary'}>·</span>
        <div class={' text-lg ml- 2 w-28 font-normal'}>服务数据平台</div> */}
          {slots.default ? slots.default() : null}
          {store.state.isLoginStatus ? (
            <div class={'absolute w-32 right-4 leading-r2.2  text-center inline-block top-2  align-top'}>
              <Popover
                placement="bottomRight"
                trigger="hover"
                class={''}
                visible={hoverStatus.value}
                onVisibleChange={(visible: boolean) => {
                  hoverStatus.value = visible;
                }}
                content={
                  <div class={' w-r20 h-auto leading-r2.4 text-left text-sm p-8 overflow-hidden'}>
                    <h5 class={' font-medium-family text-base mb-2'}>下载提示</h5>
                    <p class="text-gray-320 text-sm">每次最多导出20万条</p>
                    <p class={'float-right mt-5 '}>
                      <Button
                        class={'mr-2'}
                        onClick={() => {
                          downloadStatus.value = false;
                          hoverStatus.value = false;
                        }}
                      >
                        取消
                      </Button>
                      <Button
                        type="primary"
                        onClick={() => {
                          downloadStatus.value = true;
                        }}
                      >
                        查看
                      </Button>
                    </p>
                  </div>
                }
              >
                <span class={'relative inline-block text-center  mt-2 '}>
                  <i class={'iconfont icon-icon_offline_download  mr-4 text-2xl hover:text-red-650'}></i>
                </span>
              </Popover>
              {/* <span class={'text-xs mr-3'}>{store.state.userInfo?.account}</span> */}
              <Popover
                placement="bottom"
                class={'w-r8 h-auto'}
                content={
                  <div class={' hover:text-red-650 w-r8 h-r2.3 leading-r2.4 text-center text-sm'}>
                    <span class={'mr-2 iconfont icon-icon_out '} />
                    <span
                      class={'cursor-pointer'}
                      onClick={() => {
                        store.toLoginOut();
                      }}
                    >
                      退出登陆
                    </span>
                  </div>
                }
              >
                <Avatar class={' inline-block w-8 h-8 mr-3'} src={tx}></Avatar>
                <span class={'text-xs'}> {store.state.userInfo?.name}</span>
              </Popover>

              {/* <a
              class="text-xs text-red-600"
              onClick={() => {
                store.toLoginOut();
              }}
            >
              退出
            </a> */}
            </div>
          ) : null}
        </div>
        {downloadStatus.value ? <Download isOpen={downloadStatus.value} changeOpenStatus={changeOpenStatus}></Download> : null}
      </>
    );
  }
});
